<template>
  <div>
    <el-table :data="tableData" border style="width: 100%" size="mini">
      <el-table-column label="出参名" width="200">
        <template slot-scope="scope">
          <el-input
            clearable
            v-model="scope.row.key"
            size="mini"
            placeholder="token"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="表达式" width="280">
        <template slot-scope="scope">
          <el-input
            clearable
            v-model="scope.row.value"
            size="mini"
            placeholder="content.data.token"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="描述" width="220">
        <template slot-scope="scope">
          <el-input
            clearable
            v-model="scope.row.desc"
            size="mini"
            placeholder="登录凭证"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            icon="el-icon-circle-plus-outline"
            size="mini"
            @click="insertTableRow(scope.$index, scope.row)"
            style="border:none"
          >
          </el-button>

          <el-button
            icon="el-icon-delete"
            size="mini"
            v-show="scope.$index !== 0"
            @click="deleteTableRow(scope.$index, scope.row)"
            style="border:none"
          >
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { isEmpty, cloneDeep } from "lodash";

export default {
  name: "ResponseExtract",
  props: ["extract"],
  components: {},
  computed: {},
  watch: {
    extract: function(now) {
      this.tableData = cloneDeep(now);
    }
  },
  created() {
    this.tableData = isEmpty(this.extract)
      ? this.defaultValue
      : cloneDeep(this.extract);
  },
  methods: {
    emitExtract() {
      return this.tableData;
    },

    // 增加表格行数
    insertTableRow(index, row) {
      this.tableData.push({
        key: "",
        value: "",
        desc: ""
      });
    },

    // 删除表格行数
    deleteTableRow(index, row) {
      this.tableData.splice(index, 1);
    },

    initData() {
      this.tableData.splice(0, this.tableData.length, {
        key: "",
        value: "",
        desc: ""
      });
    }
  },
  data() {
    return {
      defaultValue: [
        {
          key: "",
          value: "",
          desc: ""
        }
      ],
      tableData: []
    };
  }
};
</script>

<style lang="less"></style>
